<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>bgm-背景音乐</title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/iconfont.css" rel="stylesheet" />
    <!--
        <link href="css/stylemyprofile.css" rel="stylesheet" />
        -->
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #Background {
            width: 100%;
        }

        #header {
            position: absolute;
            width: 88%;
            height: 20%;
            z-index: 1;
            left: 6.5%;
            top: 1%;
        }

        div#middle {
            position: absolute;
            width: 100%;
            top: 2.7rem;
        }
        
        #fenlei {
            position: absolute;
            z-index: 2;
            left: 0px;
            top: 20.0vh;
            width: 100%;
        }

        /*小图标列表 #list-leibiao */
        .list-item {
            width: 25%;
            float: left;
            background-color: #FFFFFF;
        }
        .mui-table-view-cell:after {
            content: none;
        }
        .list-item-a{				
            text-align: center;
        }
        .list-item .list-item-a img {
            width: 3.8rem;
            height: 3.8rem;
            text-align: center;
            min-width: 20px;
        }
        .list-item .list-item-a p {
            text-align: center;
            font-family: ”Microsoft YaHei”;
            font-size: 1.0rem;
            font-weight: bold;
            color: #848484;
        }

        @media (max-height:720px) {
            #fenlei {
                top: 35.8vh;
            }
            .list-item .list-item-a img {
                width: 2.5rem;
                height: 2.5rem;
            }
            .list-item .list-item-a p {
                font-size: 0.8rem;
            }
        }
		
		#songlist {
			position: absolute;
			z-index: 2;
			left: 0px;
			top: 49.5vh;
			width: 100%;
		}
		.noneUL{
			margin-top: 0px;
			margin-bottom: 0px;
			padding-left: 0px;
		}
		.bgc-red{
			background-color: #e12f32;
		}

		.songlist-item {
			height: 10rem;
			width: 50%;
			float: left;
		}
		
		.songlist-p{
			margin: 0 1.1rem;
			font: bold 1.6rem/2.0rem "Microsoft YaHei";
			color: #5C656A;
			/*background-color: #DCEFFE;*/
			/* background-color: #E2E2E2; */
			border-radius: 1.6rem;
			text-align: center;
			margin-bottom: 2.2rem;
		}
    </style>
</head>

<body>
    <div id="con">
        <img id="Background" src="">
    </div>
    <!--页面标题栏开始-->
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>
			</button>
        <h1 class="mui-center mui-title">背景音乐</h1>
    </div>
    <!--页面标题栏结束-->
    <div id="header">
        <div id="middle" class="mui-input-row mui-search mui-input-speech search">
            <input type="search" class="mui-input-speech mui-input-clear" placeholder="搜索框">
        </div>
    </div>
    <div id="fenlei">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell list-item">
                <a class="list-item-a" href="#">
                    <img class="list-item-img" src="" alt="热门音乐" />
                    <p>热门音乐</p>
                </a>
            </li>
            <li class="mui-table-view-cell list-item">
                <a class="list-item-a" href="#">
                    <img class="list-item-img" src="" alt="经典老歌" />
                    <p>经典老歌</p>
                </a>
            </li>
            <li class="mui-table-view-cell list-item">
                <a class="list-item-a" href="#">
                    <img class="list-item-img" src="" alt="古典" />
                    <p>古典</p>
                </a>
            </li>
            <li class="mui-table-view-cell list-item">
                <a class="list-item-a" href="#">
                    <img class="list-item-img" src="" alt="广场" />
                    <p>广场</p>
                </a>
            </li>
            <li class="mui-table-view-cell list-item">
                <a class="list-item-a" href="#">
                    <img class="list-item-img" src="" alt="流行" />
                    <p>流行</p>
                </a>
            </li>
            <li class="mui-table-view-cell list-item">
                <a class="list-item-a" href="#">
                    <img class="list-item-img" src="" alt="影视" />
                    <p>影视</p>
                </a>
            </li>
            <li class="mui-table-view-cell list-item">
                <a class="list-item-a" href="#">
                    <img class="list-item-img" src="" alt="纯音乐" />
                    <p>纯音乐</p>
                </a>
            </li>
        </ul>
    </div>
    <div id="songlist">
		<ul class="mui-table-view noneUL bgc-red mui-clearfix">
			<li class="mui-table-view-cell songlist-item">
				<a class="songlist-item-a" href="#">
					<p id="songlist-a" class="songlist-p" style="background-color: #DCEFFE;">热门歌曲</p>
				</a>
			</li>
			<li class="mui-table-view-cell songlist-item">
				<a class="songlist-item-a" href="#">
					<p id="songlist-b" class="songlist-p" style="background-color: #E2E2E2;">我的收藏</p>
				</a>
			</li>
		</ul>
    </div>
    <script src="js/mui.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/app.js"></script>
    <script>
        /*mui.init({
        				swipeBack: false //启用右滑关闭功能
        			}, false);*/
        mui.init();
        mui.ready(function() {});
        //window.addEventListener('show', function() {}, false);
        mui.plusReady(function() {
            //var settings = app.getSettings();
            /*				var system = {};
            				system.Linux7 = navigator.platform.indexOf("Linux armv7l") == 0;
            				if(system.Linux7) {
            					//plus.nativeUI.toast(p);
            					laoyou.style.top = 85 + 'vh';
            					laoyou1.style.height = 25 + 'vh';
            					laoyou1.style.width = 25 + 'vh';
            					laoyou2.style.height = 25 + 'vh';
            					laoyou2.style.width = 25 + 'vh';
            					laoyou3.style.height = 25 + 'vh';
            					laoyou3.style.width = 25 + 'vh';
            				} else {
            					system.Linux = navigator.platform.indexOf("Linux") == 0;
            					if(system.Linux) {
            						//styleElement.style.marginTop = 29 + 'rem';
            						var p = window.screen.availHeight / window.screen.availWidth;
            						if(p > 1.8) {
            							laoyou.style.top = 75.2 + 'vh';
            							laoyou1.style.height = 24 + 'vh';
            							laoyou1.style.width = 24 + 'vh';
            							laoyou2.style.height = 24 + 'vh';
            							laoyou2.style.width = 24 + 'vh';
            							laoyou3.style.height = 24 + 'vh';
            							laoyou3.style.width = 24 + 'vh';
            						} else {
            							//gongfen_sum.style.marginTop = 60 + '%';
            							laoyou.style.top = 85 + 'vh';
            							laoyou1.style.height = 24 + 'vh';
            							laoyou1.style.width = 24 + 'vh';
            							laoyou2.style.height = 24 + 'vh';
            							laoyou2.style.width = 24 + 'vh';
            							laoyou3.style.height = 24 + 'vh';
            							laoyou3.style.width = 24 + 'vh';
            						}
            					}
            					system.iPhone = navigator.platform.indexOf("iPhone") == 0;
            					if(system.iPhone) {
            						laoyou.style.top = 85 + 'vh';
            						laoyou1.style.height = 24 + 'vh';
            						laoyou1.style.width = 24 + 'vh';
            						laoyou2.style.height = 24 + 'vh';
            						laoyou2.style.width = 24 + 'vh';
            						laoyou3.style.height = 24 + 'vh';
            						laoyou3.style.width = 24 + 'vh';
            					}
            					//system.Win = navigator.platform.indexOf("Win") == 0;
            				}*/
							var songbuttonA = document.getElementById('songlist-a');
							var songbuttonB = document.getElementById('songlist-b');
							songbuttonA.addEventListener('tap', function() {
								this.style.backgroundColor = "#DCEFFE";
								songbuttonB.style.backgroundColor = "#E2E2E2";
							});
							songbuttonB.addEventListener('tap', function() {
								this.style.backgroundColor = "#DCEFFE";
								songbuttonA.style.backgroundColor = "#E2E2E2";
							});
            //--
            /*$.oldBack = mui.back;
            var backButtonPress = 0;
            $.back = function(event) {
            	backButtonPress++;
            	if (backButtonPress > 1) {
            		plus.runtime.quit();
            	} else {
            		plus.nativeUI.toast('再按一次退出应用');
            	}
            	setTimeout(function() {
            		backButtonPress = 0;
            	}, 1000);
            	return false;
            };*/
        });

    </script>
</body>

</html>
